import React, { FC, useEffect, useState } from 'react'
import { ordercouponlist } from '@/api/orderCoupon'
import { Popup } from 'antd-mobile'
import { OrderCouponInfo } from '@/types/orderCoupon'
import { CourseId } from '@/types'
import { XBusinesslineId } from '@/constants'
import { Product } from '@/types/product'
import {
  selectOrderCoupon,
  selectConfirmUpdatePriceParam,
  updateOrderCoupon,
} from '@/store/confirmPay'
import { useAppSelector, useAppDispatch } from '@/store'
import { OrderConfirm } from '@/types/orderConfirm'
import OrderCouponSelect from './orderCouponSelect'
import CashCouponSelect from './cashCouponSelect'
import { EcouponType } from '@/types/enum'
interface OrderCouponProps {
  productInfo: Product[]
  course_id: CourseId
  paymentData: OrderConfirm
  balance: string | number
  setVisible: (status: boolean) => void
}

const orderCouponList: FC<OrderCouponProps> = (props) => {
  /**优惠券信息 */
  const [orderCouponInfo, setOrderCouponInfo] = useState<Partial<OrderCouponInfo>>(
    useAppSelector(selectOrderCoupon),
  )
  const dispatch = useAppDispatch()

  /**弹窗状态 */
  const [select, setSelect] = useState<boolean>(false)
  const [selectType, setSelectType] = useState<EcouponType>(0)
  /**修改价格 */
  const paramTmp = useAppSelector(selectConfirmUpdatePriceParam)
  const changePrise = async () => {
    const res = await ordercouponlist({
      app_id: 1,
      product_info: props.paymentData.couponProdInfo.map((val) => ({
        product_id: val.id,
        price: val.price,
      })),
      best_price: props.paymentData.realPayMoney,
      'X-Businessline-Id': XBusinesslineId,
    })
    dispatch(updateOrderCoupon(res.result.data))
    setOrderCouponInfo(res.result.data)
  }
  return (
    <>
      <Popup
        visible={true}
        onMaskClick={() => {
          props.setVisible(false)
        }}
        bodyStyle={{ height: '50rem' }}
      >
        <div className=" pl-r1.6 pr-r1.6 ">
          <div className=" text-center text-gray-333333 text-r1.6 leading-r1.6 font-medium font-medium-family relative pl-r1.0 pr-r1.0 pt-r1.6 pb-r2.0">
            <span>优惠券</span>
            <span
              className=" absolute right-0 w-r2.0 h-r2.0 text-r1.6"
              onClick={() => {
                props.setVisible(false)
              }}
            >
              <i className="iconfont icon-icon_colse"></i>
            </span>
          </div>
          <div className=" ">
            {orderCouponInfo ? (
              <span>已选中最优推荐优惠券，共抵扣￥{orderCouponInfo.total_reduced_money}</span>
            ) : (
              <>
                <span>未选中最优推荐优惠券，共抵扣￥0 </span>
                <span
                  className=" float-right border border-orange-DEBE86 text-orange-DEBE86 rounded-r0.5 "
                  onClick={() => {
                    changePrise()
                  }}
                >
                  推荐使用
                </span>
              </>
            )}
          </div>
          <div>
            <div className=" w-full clear-both leading-r1.6  text-gray-333333 text-r1.4 font-normal pt-r1.3 ">
              <span className=" float-left ">订单类</span>
              <span
                className=" float-right font-medium text-gray-999999  leading-r1.2 text-r1.2 "
                onClick={() => {
                  //   setSelect(true)
                  setSelectType(EcouponType.order)
                  setSelect(true)
                }}
              >
                -¥{orderCouponInfo.order_coupon_reduced_money}
                <i className=" iconfont icon-icon_arrow_right  relative top-r0.2"></i>
              </span>
            </div>
            {/* <div className=" w-full clear-both leading-r1.6  text-gray-333333 text-r1.4 font-normal pt-r1.3 ">
              <span className=" float-left ">课程类</span>
              <span
                className=" float-right font-medium text-gray-999999  leading-r1.2 text-r1.2 "
                onClick={() => {}}
              >
                <i className=" iconfont icon-icon_arrow_right  relative top-r0.2"></i>
              </span>
            </div> */}
            <div className=" w-full clear-both leading-r1.6  text-gray-333333 text-r1.4 font-normal pt-r1.3 ">
              <span className=" float-left ">现金类</span>
              <span
                className=" float-right font-medium text-gray-999999  leading-r1.2 text-r1.2 "
                onClick={() => {
                  //   setSelect(true)
                  setSelectType(EcouponType.cash)
                  setSelect(true)
                }}
              >
                -¥{orderCouponInfo.cash_coupon_reduced_money}
                <i className=" iconfont icon-icon_arrow_right  relative top-r0.2"></i>
              </span>
            </div>
          </div>
        </div>
        <div className="w-full fixed bottom-0  h-r8.6  bg-white">
          <div className=" h-r6.0 pl-r1.6 pr-r1.6 pt-r0.9 pb-r1.0 leading-r6.0 overflow-hidden text-center ">
            <span
              className="  text-r1.4 h-r4.0 w-r17.0  text-white leading-r4.0 rounded-r2.0  bg-gradient-to-r from-orange-FF664F to-orange-FF3627  inline-block "
              onClick={() => {
                props.setVisible(false)
              }}
            >
              确定
            </span>
          </div>
        </div>
      </Popup>
      {select && selectType === EcouponType.order ? (
        <OrderCouponSelect
          productInfo={[]}
          orderCouponInfo={orderCouponInfo}
          course_id={props.course_id}
          balance={props.balance}
          setVisible={setSelect}
        ></OrderCouponSelect>
      ) : null}
      {select && selectType === EcouponType.cash ? (
        <CashCouponSelect
          productInfo={[]}
          orderCouponInfo={orderCouponInfo}
          course_id={props.course_id}
          balance={props.balance}
          setVisible={setSelect}
        ></CashCouponSelect>
      ) : null}
    </>
  )
}

export default orderCouponList
